<template>
    <div class="warp">
        <el-tabs v-model='tabOneActive' tab-position="left" >
            <el-tab-pane label="绣字选项" name="绣字选项" class="tabs3">
                <el-form :model="rule" ref="forms" label-width="90px">
                    <el-form-item label="绣字类型" prop="xiuziType">
                        <el-select v-model="rule.xiuziType" placeholder="请选择绣字类型" @change="xzTypeChange">
                            <el-option v-for="x in options1" :key="x.value" :label="x.label" :value="x.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="绣字位置" prop="xiuziWeizhi" v-show="rule.xiuziType != '无绣字'">
                        <el-select v-model="rule.xiuziWeizhi" placeholder="请选择绣字位置">
                            <el-option v-for="x in weizhiData" :key="x.xiuziLocaltion" :label="x.xiuziLocaltion" :value="x.xiuziLocaltion"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="绣字第一行" prop="buy" v-if="rule.xiuziType == '文字'">
                        <el-input v-model="rule.xiuziOneNeirong" placeholder="请填写需要绣字的内容" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="绣字第二行" prop="buy" v-if="rule.xiuziType == '文字'">
                        <el-input v-model="rule.xiuziTwoNeirong" placeholder="请填写需要绣字的内容" clearable></el-input>
                    </el-form-item>


                    <el-form-item label="绣字字体" v-if="rule.xiuziType == '文字'">
                        <el-input v-model="search_ziti_code" class="input_search" placeholder="请输入绣字字体编号" style="width: 320px;float: left;margin-right: 110px" v-if="rule.xiuziType == '文字'">
                            <el-button slot="append" icon="el-icon-search" @click="show_fontpagelist()"></el-button>
                        </el-input>
                        <el-radio-group v-model="rule.xiuziZiti">
                            <el-radio-button v-for="y in tabsList['绣字字体']"
                            :key="y.id" :label="y.id"
                            :value="y.embroideredName">
                                <div><img :src="y.embroideredImage" alt=""></div>
                                <strong>{{y.embroideredName}}</strong><br/>
                                <strong>{{y.code}}</strong>
                            </el-radio-button>
                        </el-radio-group>

                        <!--分页插件-->
                        <div class="mom-pagination">
                            <el-pagination
                                    background
                                    layout="prev, pager, next"
                                    :total="pageTotal"
                                    :page-size="pageSize"
                                    :pager-count="pagerCount"
                                    @next-click="currentPage+=1,handleCurrentChange1"
                                    @prev-click="currentPage-=1,handleCurrentChange1"
                                    @current-change="handleCurrentChange1"
                            >
                            </el-pagination>
                        </div>
                    </el-form-item>

                    <el-form-item label="绣字图形" v-if="rule.xiuziType == '图片'">
                        <el-input v-model="search_img_code" class="input_search" placeholder="请输入绣字图形编号" style="width: 320px;float: left;margin-right: 110px" v-if="rule.xiuziType == '图片'">
                            <el-button slot="append" icon="el-icon-search" @click="show_xiuziImgpagelist()"></el-button>
                        </el-input>

                        <el-radio-group v-model="rule.xiuziImg">
                            <el-radio-button v-for="y in tabsList['绣字图形']"
                            :key="y.id" :label="y.id"
                            :value="y.embroideredName">
                                <div><img :src="y.embroideredImage" alt=""></div>
                                <strong>{{y.embroideredName}}</strong><br/>
                                <strong>{{y.code}}</strong>
                            </el-radio-button>
                        </el-radio-group>
                        <!--分页插件-->
                        <div class="mom-pagination">
                            <el-pagination
                                    background
                                    layout="prev, pager, next"
                                    :total="pageTotal2"
                                    :page-size="pageSize"
                                    :pager-count="pagerCount2"
                                    @next-click="currentPage+=1,handleCurrentChange2"
                                    @prev-click="currentPage-=1,handleCurrentChange2"
                                    @current-change="handleCurrentChange2"
                            >
                            </el-pagination>
                        </div>
                    </el-form-item>

                    <el-form-item label="绣字颜色" v-if="rule.xiuziType == '文字' || rule.xiuziType == '图片'">
                        <el-input v-model="search_color_code" class="input_search" placeholder="请输入绣字颜色编号" style="width: 320px;float: left;margin-right: 110px" v-if="rule.xiuziType == '文字' || rule.xiuziType == '图片'">
                            <el-button slot="append" icon="el-icon-search" @click="show_colorpagelist()"></el-button>
                        </el-input>
                        <el-radio-group v-model="rule.xiuziColor">
                            <el-radio-button v-for="y in xiuziColorData"
                            :key="y.id" :label="y.id"
                            :value="y.colorName">
                                <div><img :src="y.colorImg" alt=""></div>
                                <strong>{{y.colorName}}</strong><br/>
                                <strong>{{y.code}}</strong>
                            </el-radio-button>
                        </el-radio-group>

                        <!--分页插件-->
                        <div class="mom-pagination">
                            <el-pagination
                                    background
                                    layout="prev, pager, next"
                                    :total="pageTotal3"
                                    :page-size="pageSize"
                                    :pager-count="pagerCount3"
                                    @next-click="currentPage+=1,handleCurrentChange"
                                    @prev-click="currentPage-=1,handleCurrentChange"
                                    @current-change="handleCurrentChange"
                            >
                            </el-pagination>
                        </div>
                    </el-form-item>
<!--                    <el-form-item label="绣字宽度">-->
<!--                        <el-select v-model="rule.xiuziHeight" placeholder="请选择绣字宽度">-->
<!--                            <el-option v-for="x in xzHeightData" :key="x.id" :label="x.embroideredHeight" :value="x.id"></el-option>-->
<!--                        </el-select>-->
<!--                    </el-form-item>-->
                    <el-form-item label="绣字高度" v-show="rule.xiuziType != '无绣字'">
                        <el-select v-model="rule.xiuziHeight" placeholder="请选择绣字高度">
                            <el-option v-for="x in xzHeightData" :key="x.id" :label="x.embroideredHeight" :value="x.id"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="自定义图形" v-if="rule.xiuziType == '自定义图片'">
                        <el-upload
                                action=" https://api.nbyid.cn/mlcc/user/interface/uploadImage"
                                list-type="picture-card"
                                :on-preview="handlePictureCardPreview"
                                :on-remove="handleRemove"
                                :on-success="handleSuccess"
                                :limit="1"
                                :file-list="fileList"
                                :class="{hidePlusUpload: this.fileList.length>=1}"
                                ref="upload">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </el-form-item>
                </el-form>
            </el-tab-pane>

            <el-tab-pane label="撞色选项" name="撞色选项" class="order_tabs-pane">
                <div v-for="y in zhuangseData" :key="y.id" class="li">
                    <div><img :src="y.contrastColorImg" alt=""></div>
                    <strong @click="zsClick(y)">{{EditzhuangseIds[y.id] == undefined ? y.contrastColorName : EditzhuangseIds[y.id]}}<img src="@/assets/img/u3152.png" width="10" alt=""></strong><br/><br/>
                    <strong>{{y.code}}</strong>
                </div>
            </el-tab-pane>
        </el-tabs>
        <ZSopen :open="zsOpenOn" :selected="zsColorSelect" @closed="zsOpenClose"></ZSopen>

        <!--分页插件-->
<!--        <div class="mom-pagination">-->
<!--            <el-pagination-->
<!--                    background-->
<!--                    layout="prev, pager, next"-->
<!--                    :total="pageTotal"-->
<!--                    :page-size="pageSize"-->
<!--                    @next-click="currentPage+=1,handleCurrentChange"-->
<!--                    @prev-click="currentPage-=1,handleCurrentChange"-->
<!--                    @current-change="handleCurrentChange"-->
<!--            >-->
<!--            </el-pagination>-->
<!--        </div>-->

    </div>
</template>

<script>
import Vue from 'vue'
import ZSopen from './zsopen'
export default {
    name: 'Tabs5',
    props:['switch'],
    data() {
        return{
            search_ziti_code:'',//字体code,
            search_img_code:'',//图片code,
            search_color_code:'',//颜色code,
            pageTotal: 20, // 总条目
            pageTotal2: 20, // 总条目
            pageTotal3: 20, // 总条目
            pageSize: 14, // 页面大小
            currentPage: 1, // 当前页
            pagerCount: 5, // 总共有几页
            pagerCount2: 5, // 总共有几页
            pagerCount3: 5, // 总共有几页
            tabsList:[],
            tabOneDataList: {},//tabsOne内的单选组数据
            tabOneActive:'绣字选项',//导航栏1状态激活
            xiuziColorData: [],//绣字颜色数据
            xiuziColorData2: [],//绣字颜色数据2
            zhuangseData: [],//撞色大图数据
            weizhiData: [],//绣字位置数据
            options1:[{value: '无绣字',label: '无绣字'},{value: '文字',label: '文字'},{value: '图片',label: '图片'},{value: '自定义图片',label: '自定义图片'}],
            xzLocation: '', //绣字位置Selected
            xzHeight:'',//绣字高度
            xzHeightData: '',//绣字高度数据
            uploadUrl: process.env.VUE_APP_API + 'user/interface/uploadImage',//图片上传api
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,
            fileList: [],
            zsOpenOn: 'close',
            EditzhuangseIds: this.$store.state.OrderUser.EditzhuangseIds,
            zsColorSelect:'',//选中的撞色类别
            states: true,//true重新绑定
            rule: this.$store.state.OrderUser.Order_user_Info_temp,
        }
    },
    computed: {
        getTypeids() {
            return this.$store.getters.getOrder_user_category_id();
        },
        sSwitch() {
            return this.switch;
        },
        getChecked() {
            return this.$store.state.OrderUser.Order_user_Info_temp.id;
        }
    },
    created() {
        this.fileList = [];
        let imgStr = this.$store.state.OrderUser.Order_user_Info_temp.zidingyiImg;
        if (!!imgStr) {
            this.fileList = imgStr.split(',').filter(item => item).map(item=> ({url:item}));
        }
    },
    methods: {
        onInput(){
            alert("adv")
            this.$forceUpdate()
        },
        // 分页触发请求
        handleCurrentChange(val) {//绣字颜色
            this.currentPage = val
            this.show_colorpagelist()
        },
        handleCurrentChange1(val){//绣字字体
            this.currentPage = val
            this.show_fontpagelist();
        },
        handleCurrentChange2(val){//绣字图片
            this.currentPage = val
            this.show_xiuziImgpagelist();
        },
        show_colorpagelist(){//查询颜色
            let params_color = new FormData();
            params_color.append("category_ids", this.$store.getters.getOrder_user_category_id());
            params_color.append("pageNo", this.currentPage);
            params_color.append("pageSize", 30);
            params_color.append("code", this.search_color_code);
            this.$http.post('logic/interface/query_xiuziColorPageList',params_color).then( async(result) => {
                // this.xiuziColorData = result.data.data;
                this.xiuziColorData = result.data.data.records;
                this.pageTotal3 = result.data.data.total
                this.pageSize = result.data.data.size
            });
        },
        show_fontpagelist(){//查询字体
            let params_color = new FormData();
            params_color.append("category_ids", this.$store.getters.getOrder_user_category_id());
            params_color.append("pageNo", this.currentPage);
            params_color.append("pageSize", 30);
            params_color.append("type", "0");
            params_color.append("code", this.search_ziti_code);
            this.$http.post('logic/interface/query_xiuziImgPageList',params_color).then( async(result) => {
                // this.xiuziColorData = result.data.data;
                Vue.set(this.tabsList,'绣字字体',result.data.data.records);
                // this.tabsList = result.data.data.records;
                this.pageTotal = result.data.data.total
                this.pageSize = result.data.data.size
            });
        },
        show_xiuziImgpagelist(){//查询字体图片
            let params_color = new FormData();
            params_color.append("category_ids", this.$store.getters.getOrder_user_category_id());
            params_color.append("pageNo", this.currentPage);
            params_color.append("pageSize", 30);
            params_color.append("type", "1");
            params_color.append("code", this.search_img_code);
            this.$http.post('logic/interface/query_xiuziImgPageList',params_color).then( async(result) => {
                // this.xiuziColorData = result.data.data;
                Vue.set(this.tabsList,'绣字图形',result.data.data.records);
                // this.tabsList = result.data.data.records;
                this.pageTotal2 = result.data.data.total
                this.pageSize = result.data.data.size
            });
        },
        async tabOpenBind() {
            if(this.states) {
                this.states = false;
                let params = new FormData();
                params.append("type", "0");
                params.append("pageNo", this.currentPage);
                params.append("pageSize", 30);
                params.append("category_ids", this.$store.getters.getOrder_user_category_id());
                await this.$http.post('logic/interface/query_xiuziImgPageList',params).then( async(result) => {
                    Vue.set(this.tabsList,'绣字字体',result.data.data.records);
                    this.pageTotal = result.data.data.total
                    this.pageSize = result.data.data.size
                });
                let params2 = new FormData();
                params2.append("type", "1");
                params2.append("pageNo", this.currentPage);
                params2.append("pageSize", 30);
                params2.append("category_ids", this.$store.getters.getOrder_user_category_id());
                await this.$http.post('logic/interface/query_xiuziImgPageList',params2).then( async(result) => {
                    Vue.set(this.tabsList,'绣字图形',result.data.data.records);
                    this.pageTotal2 = result.data.data.total
                    this.pageSize = result.data.data.size
                });
                //查绣字颜色
                // let params_color = new FormData();
                // params_color.append("category_ids", this.$store.getters.getOrder_user_category_id());
                // await this.$http.post('logic/interface/query_AllembroiderColor',params_color).then( async(result) => {
                //     this.xiuziColorData = result.data.data;
                // });
                let params_color = new FormData();
                params_color.append("category_ids", this.$store.getters.getOrder_user_category_id());
                params_color.append("pageNo", this.currentPage);
                params_color.append("pageSize", 30);
                await this.$http.post('logic/interface/query_xiuziColorPageList',params_color).then( async(result) => {
                    // this.xiuziColorData = result.data.data;
                    // alert(result.data.data)
                    this.xiuziColorData = result.data.data.records;
                    this.pageTotal3 = result.data.data.total
                    this.pageSize = result.data.data.size
                });

                //查撞色大图
                let params3 = new FormData();
                params3.append("category_ids", this.$store.getters.getOrder_user_category_id());
                await this.$http.post('logic/interface/query_AllContrastcolorInfo',params3).then( async(result) => {
                    this.zhuangseData = result.data.data;
                });
                //查绣字位置
                let params4 = new FormData();
                params4.append("category_ids", this.$store.getters.getOrder_user_category_id());
                await this.$http.post('logic/interface/query_localtion',params4).then( async(result) => {
                    this.weizhiData = result.data.data;
                });
                //查绣字高度
                let params5 = new FormData();
                // params5.append("xiuziType", value);
                params5.append("category_ids", this.$store.getters.getOrder_user_category_id());
                this.$http.post('logic/interface/query_xiuzi_heaight',params).then(result => {
                    this.xzHeightData = result.data.data;
                });

                // if(!!this.$store.state.OrderUser.Order_user_Info_temp.zidingyiImg) {
                //     this.fileList.push({url: this.$store.state.OrderUser.Order_user_Info_temp.zidingyiImg})
                // }
                this.fileList = [];
                let imgStr = this.$store.state.OrderUser.Order_user_Info_temp.zidingyiImg;
                if (!!imgStr) {
                    this.fileList = imgStr.split(',').filter(item => item).map(item=> ({url:item}));
                }
            }
        },
        async tabsOneRadioChange(val) {
            //监听单选按钮组选中变化，适用于单选变化后，下级全部重新请求且做数组第一项默认
            let category_ids = '';
            for(let i=0;i<this.tabsList.length;i++) {
                if(val >= i) {
                    //存储靶向上级已经单选的id
                    category_ids += ',' + this.tabsList[i].unit;
                }else {
                    //靶向下级重新请求数据
                    await this.$http.post('logic/interface/query_categoryinfo',{template_id:this.tabsList[i].id,category_ids:category_ids.substr(1,category_ids.length)}).then(result => {
                        Vue.set(this.tabOneDataList,this.tabsList[i].parameter,result.data.data)
                        //默认选中第一个
                        if(result.data.data.length > 0) {
                            this.tabsList[i].unit = result.data.data[0].id;
                            category_ids += ',' + this.tabsList[i].unit;
                        }else {
                            this.tabsList[i].unit = undefined;
                        }
                    });
                }
            }
        },
        xzTypeChange(value) {
            let params = new FormData();
            params.append("xiuziType", value);
            params.append("category_ids", this.$store.getters.getOrder_user_category_id());
            this.$http.post('logic/interface/query_xiuzi_heaight',params).then(result => {
                this.xzHeightData = result.data.data;
            });
        },
        handleRemove(file, fileList) {
            // console.log(file, fileList);
            // this.$refs.uploadImg.clearFiles();
            let delIndex = this.fileList.findIndex(item => item.url === file.url);
            if (delIndex !== -1) {
                this.fileList.splice(delIndex, 1);
                this.setLiangtiImgs();
            }
        },
        //上传图片成功函数
        handleSuccess(response,file, fileList) {
            var result = response;
            // console.log('file', result, 'file', file)
            if (result.data && result.data != '') {
                this.fileList.push({url: result.data})
            }
            this.setLiangtiImgs();
            // this.dialogImageUrl = result.data+"";
            // this.rule.liangtiImgs = result.data+"";
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        setLiangtiImgs(){
            this.rule.zidingyiImg = this.fileList.map(item => item.url).join(",");
            // console.log(this.rule, 'sss', this.fileList)
            // this.rule.liangtiImgs = this.fileList.map(item.item);
        },
        // handleRemove(file) {
        //     this.$refs.uploadImg.clearFiles();
        // },
        // handlePictureCardPreview(file) {
        //     this.dialogImageUrl = file.url;
        //     this.dialogVisible = true;
        // },
        // onSuccess(res,file,fileList) {
        //     if(res.code == 0) {
        //         this.rule.zidingyiImg = res.data;
        //     }else {
        //         this.$message({
        //             message: '上传失败',
        //             type:'error'
        //         });
        //     }
        // },
        // uploadError(err) {
        //     this.$message({
        //         message:err,
        //         type: 'error'
        //     });
        // },
        zsClick(value){
            this.zsColorSelect = value;
            this.zsOpenOn = 'open';
            this.xiuziColorData2=[];
            let params = new FormData();
            params.append("category_ids", this.$store.getters.getOrder_user_category_id());
            this.$http.post('logic/interface/query_AllembroiderColor',params).then(async (result) => {
                this.xiuziColorData2 = result.data.data;
            });
        },
        zsOpenClose() {
            //子组件唤醒父组件关闭
            this.zsOpenOn = 'close';
        }
    },
    watch: {
        getTypeids() {
            this.states = true;
        },
        sSwitch(active) {
            if(active == 4) {
                this.tabOpenBind();
            }
        },
        getChecked() {
            this.EditzhuangseIds = this.$store.state.OrderUser.EditzhuangseIds;
            this.rule = this.$store.state.OrderUser.Order_user_Info_temp;
            this.tabOpenBind();
        }
    },
    components:{ZSopen}
}
</script>

<style scoped lang="scss">
.tabs5 /deep/ form .hidePlusUpload .el-upload--picture-card {display: none; }
.tabs3 /deep/ .el-radio-group label{position: relative;}
.tabs3 /deep/ .el-radio-group label span{ width: 172px;border: 1px solid #DCDFE6; margin-bottom: 20px;}
.tabs3 /deep/ .el-radio-button__inner{padding: 0; border-radius:0!important;}
.tabs3 /deep/ .el-radio-group input[type=radio]:checked + .el-radio-button__inner{
    background: #ffffff; border-color:$color; color: $font_color;box-shadow:0 0 0 0 $color;}
.tabs3 label img{ width: 170px; height: 170px; margin: 0 auto;}
.tabs3 /deep/ .el-radio-button__inner i{font-style:normal; line-height: 25px; padding:0 10px;
    position: absolute; top: 0; right: 0; background: $borderColor;}
.tabs3 /deep/ .el-radio-button__inner b{font-weight: inherit; display: block; line-height: 25px;}
.tabs3 /deep/ .el-radio-button__inner strong{font-size: 12px; font-weight: inherit; display: inherit;
    background: #EAEAEA; padding: 5px 12px; border-radius: 5px; margin:7px 0;}
.tabs3 /deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner strong{background: $color; font-weight: bold;}
.tabs3 /deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner b{background: $color;}
.tabs3 /deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner i{background: $color;}
.tabs3 .el-input,.tabs3 .el-select{width: 370px;}
.order_tabs-pane{display: flex; flex-wrap: wrap;}
.order_tabs-pane .li{ width: 200px;border: 1px solid #DCDFE6; margin: 0 20px 20px 0; padding: 20px 0; text-align: center;}
.order_tabs-pane .li:hover{ border-color: $color;}
.order_tabs-pane .li div{ margin-bottom: 10px;}
.order_tabs-pane .li img{ width: 180px; height: 240px; margin: 0 auto;}
.order_tabs-pane .li strong{cursor: pointer;
    font-weight: inherit; background: #EAEAEA; padding: 3px 12px; border-radius: 5px; background: #000000!important; color: $color;}
.order_tabs-pane .li strong img{ width: 18px!important; height: 18px!important;display: inline-block;margin: -5px -7px 0 0 !important;}
</style>
